<template>
  <div id="detail">
    <div class="nav">
      <p>积分明细</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>积分明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索 -->
    <div class="head">
      <el-form :model="searchData" class="top">
        <el-input
          v-model="searchData.userName"
          placeholder="用户姓名"
        ></el-input>
        <el-input v-model="searchData.phone" placeholder="手机号码"></el-input>
        <el-select
          v-model="searchData.integralTypeName"
          filterable
          placeholder="积分类别"
          @focus="getOptions"
        >
          <el-option :key="i" v-for="(v, i) in options" :value="v.typeName">{{
            v.typeName
          }}</el-option>
        </el-select>
        <el-date-picker
          v-model="searchData.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
          type="primary"
          @click="search"
          class="search"
          icon="el-icon-search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          @click="reset"
          class="reset"
          icon="el-icon-refresh"
          >重置</el-button
        >
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="content">
      <p class="list">查询结果列表</p>
      <el-table :data="tableData" stripe style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="userNumber"
          label="用户编号"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户姓名"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="personSex"
          label="人员性别"
          align="center"
          width="120"
        >
          <template slot-scope="scope"
            ><span>{{ scope.row.personSex == 0 ? '女' : '男' }}</span></template
          >
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ timeTrans(scope.row.createTime, 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="integralTypeName"
          label="积分类别"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="integralTypeValue"
          label="积分收支"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span style="color: #0bb197" @click="see(scope.$index, scope.row)">
              详情</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 20, 30, 40]"
        :page-size="count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <!-- 查看 -->
    <div class="detail">
      <el-dialog title="详情信息" :visible.sync="seeDialog">
        <el-form :model="seeData">
          <div>
            <el-form-item label="用户编码" :label-width="formLabelWidth">
              <span>{{ seeData.userNumber }}</span>
            </el-form-item>
            <el-form-item label="人员性别" :label-width="formLabelWidth">
              <span>{{ seeData.personSex }}</span>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
              <span>{{ seeData.createTime }}</span>
            </el-form-item>
            <el-form-item label="积分收支" :label-width="formLabelWidth">
              <span>{{ seeData.integralTypeValue }}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="用户姓名" :label-width="formLabelWidth">
              <span>{{ seeData.userName }}</span>
            </el-form-item>
            <el-form-item label="手机号码" :label-width="formLabelWidth">
              <span>{{ seeData.phone }}</span>
            </el-form-item>
            <el-form-item label="积分类别" :label-width="formLabelWidth">
              <span>{{ seeData.integralTypeName }}</span>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import time from '../utils/time';
export default {
  mixins: [time],
  data() {
    return {
      pagenum: 1,
      count: 5,
      total: 0,
      tableData: [],
      seeData: {},
      searchData: {
        userName: '',
        phone: '',
        integralTypeName: '',
        date: [],
      },
      formLabelWidth: '120px',
      seeDialog: false,
      options: [],
      currentPage4: 1,
      //选项
      options: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: '/smart/integral/integrals',
        method: 'post',
        params: {
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error('加载失败');
        }
      });
    },
    // 查看详情
    see(index) {
      this.seeDialog = true;
      this.$axios({
        url: '/smart/integral/integral/' + this.tableData[index].id,
        method: 'get',
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.seeData = data.data;
        } else {
          this.$message.error('查看失败');
        }
      });
    },
    // 搜索
    search: function () {
      this.$axios({
        url: '/smart/integral/integral',
        method: 'post',
        data: {
          integralTypeName: this.searchData.integralTypeName,
          phone: this.searchData.phone,
          startTime: this.searchData.date[0],
          endTime: this.searchData.date[1],
          userName: this.searchData.userName,
          pagenum: this.pagenum,
          count: this.count,
        },
      }).then(({ data }) => {
        if (data.code == '00000') {
          (this.tableData = data.data.list), (this.total = data.data.total);
        } else {
          this.$message('查询失败');
        }
      });
    },
    // 重置
    reset: function () {
      (this.searchData.userName = ''),
        (this.searchData.phone = ''),
        (this.searchData.integralTypeName = ''),
        (this.searchData.date = []),
        this.getData();
    },
    // 下拉
    getOptions: function () {
      this.$axios({
        url: '/smart/integral-type/integralList',
      }).then(({ data }) => {
        if (data.code == '00000') {
          this.options = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#detail {
  height: 100px;
  color: black;
  padding: 20px;
}
.nav {
  display: flex;
  justify-content: space-between;
}

.head {
  background: white;
  height: 80px;
  width: 100%;
  margin: 20px 0px 20px 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.el-input,
.el-select {
  width: 180px;
  margin: 10px;
}
.el-button {
  padding: 11px;
  width: 80px;
  margin: 0 5px 0 10px;
}
.search {
  background: #0bb197;
  border: 1px solid #0bb197;
}
.reset {
  background: white;
  color: #c0c4cc;
  border: 1px solid #dcdfe6;
}
.reset:hover {
  color: #0bb197;
}
.list {
  font-size: 14px;
  font-weight: 600;
  padding: 20px 0 10px 0;
}
.content {
  background: white;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 6px;
}
.el-pagination {
  height: 100px;
  margin-top: 30px;
  text-align: right;
}
.el-form {
  display: flex;
  justify-content: space-between;
}
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #0bb197;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0bb197;
  color: #fff;
}
#detail {
  .el-dialog__header {
    background-color: #0bb197;
  }
  .detail {
    .el-form-item__label,
    .el-form-item__content {
      text-align: left;
      line-height: 25px;
      margin: 0px;
    }
  }
  .el-dialog__title {
    color: white;
  }
}
</style>
